<template>
    <div>
        <!-- 头部组件 -->
        <Appheader></Appheader>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <!-- 轮播图组件 -->
            <Myswiper :swiperArr="swiperArr"></Myswiper>
            <!-- 导航菜单组件 -->
            <Navmenu></Navmenu>
            <!-- 倒计时组件 -->
            <CountDown></CountDown>
            <!-- 秒杀列表组件 -->
            <Secondkill></Secondkill>
            <!-- 产品列表 -->

            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell v-for="item in prolist" :key="item.proid" @click="gotodetailFn(item.proid)">
                    <img v-lazy="item.img1" alt="">
                    <p class="proname">{{ item.proname }}</p>
                    <p class="price">${{ item.originprice }}元</p>
                </van-cell>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
// 引入头部组件
import Appheader from '@/components/Appheader.vue'
// 引入轮播图组件
import Myswiper from '@/components/Myswiper.vue'
//引入导航菜单组件
import Navmenu from '@/components/Navmenu.vue'
// 引入倒计时组件
import CountDown from '@/components/Countdown.vue'
// 引入秒杀数据组件
import Secondkill from '@/components/Secondkill.vue'
// 导入home页请求
import { getswiperlist, getProList } from '@/api/home'
export default {
    data() {
        return {
            swiperArr: [], // 首页轮播图数组

            loading: false, // 分页加载中 
            finished: false, // 不再有分页数据的时候为true. 否为false
            prolist: [], // 分页产品列表数据
            count: 1, // 产品列表分页当前的页数
            limitNum: 10, // 产品列表分页每页数据条数 10条
            refreshing: false // 是否刷新
        }
    },
    components: {
        Appheader,
        Myswiper,
        Navmenu,
        CountDown,
        Secondkill
    },
    created() {
        // 轮播图数据请求
        getswiperlist().then(res => {
            // console.log('res', res);
            this.swiperArr = res.data
        })
    },
    methods: {
        // 上拉触底请求数据
        onLoad() {
            // 异步更新数据
            // setTimeout 仅做示例，真实场景中一般为 ajax 请求
            // setTimeout(() => {
            //     for (let i = 0; i < 10; i++) {
            //         this.list.push(this.list.length + 1);
            //     }

            //     // 加载状态结束
            //     this.loading = false;

            //     // 数据全部加载完成
            //     if (this.list.length >= 40) {
            //         this.finished = true;
            //     }
            // }, 1000);
            getProList({
                count: this.count,
                limitNum: this.limitNum
            }).then(res => {
                if (this.refreshing) {
                    this.prolist = [];
                    this.refreshing = false;
                }
                // console.log(res);
                this.prolist = this.prolist.concat(res.data)
                // 加载状态结束
                this.loading = false;
                // 当前页数++
                this.count++
                // 数据全部加载完成
                if (res.data.length == 0) {
                    this.finished = true;
                    this.count = 1
                }
            })
        },
        onRefresh() {
            // 清空列表数据
            // 设置数据还没有全部加载完
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        },
        // 跳转到详情页
        gotodetailFn(id) {
            // console.log(id);
            this.$router.push('/detail/' + id)
        }
    }
}
</script>
<style lang="less" scoped>
.van-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
}

.van-cell {
    width: 50%;

    img {
        width: 100%;
    }

    .proname {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* 设置最大显示行数 */
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }

    .price {
        color: red;
    }
}

// less 使用 /deep/
// scss 使用 ::v-deep
// 使用样式穿透可以修改 vant 组件库中的样式,要不然设置不了样式
/deep/ .van-list__finished-text {
    width: 100%;
    background: green;
}
</style>